<template>
  <div>
    <ul>
      <li>{{ Detail.name }}</li>
      <li>{{ Detail.food }}</li>
      <li><img :src="Detail.imageUrl" :alt="Detail.description" /></li>
      <li><div v-html="Detail.message"></div></li>
    </ul>
  </div>
</template>

<script>
import services from './services.js'

export default{
  data(){
    return {
      Detail: {
        id: 0,
        count: 0,
        name: '',
        food: '',
        img: '',
        description: '',
        message: ''
      }
    }
  },
  mounted(){
    var id = this.$route.params.id
    services.MenusInfo(id, (result) => {
      Object.assign(this.Detail, result)
    })
  },
  methods: {
    onClickMenusList(item){
      this.$router.push(`/MenusList/${item.id}`)
    }
  }
}
</script>
